<%--
  Created by IntelliJ IDEA.
  User: Wang Ziming
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<body>
<%--导航，有空隙，但问题不大--%>
<%--使用div的目的是为了让以上内容处于一行上--%>
<div class="nav-head">
    <nav class="gird-header" style="width: 100%">
        <div class="nav-text">
            <%--左侧文字栏，导航页--%>
            <span class="nav-text-left">
                <span><a href="${pageContext.request.contextPath}/index.jsp" class="nav-a">首页</a></span> &nbsp;
                <span><a href="/group" class="nav-a">队伍</a></span> &nbsp;
                <span><a href="/recommend" class="nav-a">推荐</a></span> &nbsp;
            </span>
            <%--搜索栏；表单方式提交--%>
            <span class="nav-text-search">
                <form action="/search" method="post" id="searchForm">
                    <%--不支持回显功能--%>
                    <input type="text" class="nav-search-group" id="search-group" name="search-group">
                    <button type="button" id="start-search-group">查询队伍</button>
                    <input type="text" class="nav-search-destination" id="search-destination" name="search-destination">
                    <button type="button" id="start-search-destination">查询出游地</button>
                </form>
            </span>
            <%--右侧登录、注册，下面已经设置成right了--%>
            <span class="nav-text-right">
                <%--对右侧的内容进行判别，看是否有用户--%>
                <%--当没有用户时--%>
                <c:if test="${empty user}">
                    <%--href="login"到达的是方法体，进行相应操作之后进入到login.jsp页面--%>
                    <span><a href="/login" class="nav-a">登录</a></span>&nbsp;
                    <span><a href="/register" class="nav-a">注册</a></span>
                </c:if>
                <%--当有用户时--%>
                <c:if test="${!empty user}">
                    <%--进入的是表层页面(WEB-INF之外)和方法体的映射地址--%>
                    <span><a href="/personalInformation" class="nav-a">个人中心</a></span>&nbsp;
                    <span><a href="/logout" class="nav-a">退出</a></span>
                </c:if>
            </span>
        </div>
    </nav>
</div>
</body>
<%--css区域--%>
<style type="text/css">
    /*对导航栏进行配置*/
    .nav-head{
        width: 100%;
        height: 23px;

        /*指明背景颜色*/
        background-color: black;
        /*背景透明度*/
        opacity: 50%;
        color: aliceblue;
        font-family: 华文行楷;
        font-size: 20px;
        /*固定*/
        /*position: fixed;*/
    }
    /*导航栏文字*/
    .nav-text{
        /*设置字体水平对齐方式*/
        /*text-align: center;*/
        /*文字颜色*/
        color: aliceblue;
        font-family: 华文行楷;
        font-size: 20px;
        font-height: 80%;
    }
    /*查询队伍、查询出游地的框*/
    .nav-text-search{
        padding-left: 25%;
    }
    /*右侧登录、注册 / 个人中心、退出*/
    .nav-text-right{
        /*针对当前模块布局情况*/
        padding-left: 45px;
    }
    /*将提交的查询表格form设置为不自动换行*/
    #searchForm{
        margin:0px;
        display: inline;
    }
    /*导航栏超链接修改*/
    .nav-a{
        text-decoration: none;
        color: floralwhite;
    }
</style>
<%--script区域--%>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        /*队伍查询*/
        $("#start-search-group").click(function () {
            var sgroup = $("#search-group").val();
            //判别搜索栏是否为空
            if (isEmpty(sgroup)) {
                //无反应
                return;
            }
            //将另外一个抹除
            $("#search-destination").val("");
            //手动提交
            $("#searchForm").submit();
        });
        /*出游地查询*/
        $("#start-search-destination").click(function () {
            var sdest = $("#search-destination").val();
            //判别搜索栏是否为空
            if (isEmpty(sdest)) {
                //无反应
                return;
            }
            //将另外一个抹除
            $("#search-group").val("");
            //手动提交
            $("#searchForm").submit();
        });
    });

    /**
     * 判断字符串是否为空：账户 / 密码
     * @param str
     * @returns {boolean}
     */
    function isEmpty(str) {
        if (str == null || str.trim() == "") {
            return true;
        }
        return false;
    }
</script>
</html>
